<script>
export default {
  name: "index",
  data() {
    return {
      orderList: [
        {number: 11293, address: '书巴自习室',data:'2024-04-32 11:20',money:30,title:'首次体验卡(4h)',static:0},
        {number: 11293, address: '书巴自习室',data:'2024-04-32 11:20',money:30,title:'首次体验卡(4h)',static:1},
        {number: 11293, address: '书巴自习室',data:'2024-04-32 11:20',money:30,title:'首次体验卡(4h)',static:2}
      ]
    }
  }
}
</script>

<template>
  <view class="order-out padding40">
    <view class="block-order-list pos-rel box-shadow padding20 rad10" v-for="(item,index) in orderList">
      <view class="pos-abs r-btn">
        <view v-if="item.static==0" class="font-red">待完成</view>
        <view v-if="item.static==1" class="font-gray">定单已完成</view>
        <view v-if="item.static==2" class="btn rad10">待支付</view>
      </view>
      <view class="list big">
        <view class="con">{{item.title}}</view>
      </view>
      <view class="list small">
        <view class="name">订单号：</view>
        <view class="con">{{item.number}}</view>
      </view>
      <view class="list pub">
        <view class="name">下单门店：</view>
        <view class="con">{{item.address}}</view>
      </view>
      <view class="list pub">
        <view class="name">下单时间：</view>
        <view class="con">{{item.data}}</view>
      </view>
      <view class="list pub money">
        <view class="name">订单金额：￥</view>
        <view class="con">{{item.money}}</view>
      </view>

    </view>
  </view>
</template>

<style scoped lang="less">
.block-order-list{
  background: rgba(255, 255, 255, 0.8);
  margin:0rpx 0rpx 30rpx 0rpx;
  .r-btn{
    top:30rpx;
    right:30rpx;
    font-size:30rpx;
    .font-red{
      color:#ff0000;
    }
    .font-gray{
      color:#999;
    }
    .btn{
      background:#0c9d16;
      padding:10rpx 20rpx;
      color:#fff;
    }
  }
  .list{
    font-size:28rpx;
    display: flex;
    align-items: center;
    &.small{
      font-size:24rpx;
      color:#999;
      font-weight: bold;
      border-bottom:1px dashed #b5d7c1;
      padding:0rpx 0rpx 10rpx 0rpx;
      margin:0rpx 0rpx 20rpx 0rpx;
    }
    &.big{
      font-weight: bold;
      font-size:32rpx;
    }
    &.pub{
      line-height:40rpx;
      padding:5rpx 0rpx;
    }
    &.money{
      .con{
        color:#000;
        font-weight: bold;
        font-size:32rpx;
      }
    }
    .name{
      color:#666;
    }
  }
}
</style>